import React from 'react'
import '../assets/styles'
// import * as monaco from 'monaco-editor';
import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution';
import MonacoEditor from 'react-monaco-editor';

import IndexService from "../service/IndexService";
import {connect} from 'react-redux';
import Dragger from "react-dragger-r";
import Const from "../Const";


class EditorContent extends React.Component {
    state = {
        initContentHeight: 100,
        contentHeight: 0,
        moveY: 0,
        handleDragIng: false
    };
    indexService = new IndexService();

    componentDidMount() {

    }

    onChangeHandle = (value, e) => {
        let tab = this.findActiveTab();
        tab.content = value;
        this.indexService.saveFileContent(tab)
    }
    findActiveTab = () => {
        let {openList} = this.props;
        for (let tab of openList) if (tab.isActive) return tab;
    }

    editorDidMountHandle(editor, monaco) {
        editor.focus();
    }

    renderEditorIns = (item) => {
        let div = null;
        switch (item.extName) {
            case ".js":
            case ".sql":
            case ".java":
            case ".cpp":
            case ".c":
            case ".txt":
                let options = {
                    selectOnLineNumbers: true,
                    renderSideBySide: false,
                    automaticLayout: true,
                    foldingStrategy: 'indentation', // 代码可分小段折叠
                    language: 'javascript',
                    value: '',
                    wordWrap: "on",   //自动换行，注意大小写
                    theme: 'vs-dark',
                    wordWrapColumn: 150,
                    wordWrapMinified: true,
                    wrappingIndent: "indent",
                    glyphMargin: false,
                    showFoldingControls: 'always',
                    fontSize: '14px',//设置字体
                    lineNumbers: "on",//行号
                    mouseWheelZoom: true,
                    smoothScrolling: true,//平滑滚动
                }
                let option = Object.assign({}, options, {value: item.content});
                div = (<MonacoEditor
                    options={option}
                    language={'javascript'}
                    onChange={this.onChangeHandle}
                    editorDidMount={this.editorDidMountHandle}
                />);
                break;
            case ".png":
                div = (<img src={item.content} alt={item.name}/>);
                break;
            default :
                div = (<div>无法查看该内容</div>)
                break;
        }
        return div;
    }

    render() {
        const {openList} = this.props;
        return (
            <div className='code-editor-warp'>
                {openList.map((item, index) => {
                    return (
                        <div key={item._id} style={{height: `calc(100% - 200px)`}}
                             className={`code-editor-item ${item.isActive ? 'show' : ''}`}>
                            {this.renderEditorIns(item)}
                            <Dragger className={`drag-handle ${this.state.handleDragIng ? 'active' : ''}`}
                                     style={{
                                         'zIndex': `${this.state.handleDragIng ? 11 : 9}`,
                                         top: '0px'
                                     }}
                                     bounds={'code-editor-warp'}
                                     allowX={false}
                                     onMove={this.onMove}
                                     onDragStart={this.onDragStart}
                                     onDragEnd={this.onDragEnd}
                            >
                                <em></em>
                            </Dragger>
                            <div className={`bottom-warp`}>
                                {this.renderEditorIns(item)}
                            </div>
                        </div>
                    )
                })}
            </div>
        );
    }

    onDragStart = (e) => {
        this.setState({
            handleDragIng: true
        })
    }
    onMove = (e, x, y) => {
        console.log(y);
        this.setState({
            moveY: y
        });
    }
    onDragEnd = (e) => {
        let toHeight = this.state.initContentHeight + this.state.moveY;
        // this.indexService.config({
        //     [Const.config_key_init_tree_width]: toWidth
        // });
        this.setState({
            handleDragIng: false,
            contentHeight: toHeight
        })
    }

}

export default connect(state => ({...state}))(EditorContent);
